import React from "react";
// import { Divider, Popconfirm } from "antd";
import Link from "umi/link";
import queryString from "query-string";
import { getMenuRouter, getPageOperate } from "components/layouts/menuFn";
import { getTableProps } from "components/searchTable/SearchTable.jsx";

export default class Base extends React.PureComponent {
  getMenuRouter = getMenuRouter.bind(this);

  getPageOperate = getPageOperate.bind(this);

  getOprateDisable = type => {
    const {
      location: { pathname = "" },
      menuDataList,
      resourceList,
    } = this.props;
    const res = this.getPageOperate(type, pathname, menuDataList, resourceList);
    return res;
  };

  // eslint-disable-next-line
  getFormConfig() {
    return [
      { label: "任务名称", key: "taskName" },
      { label: "流程名称", key: "modelName" },
      { label: "申请人", key: "applyUserName" },
      { label: "流程单号", key: "serialNum" },
    ];
  }

  getTableColumns = () => [
    // {
    //   title: "序号",
    //   dataIndex: "processInstanceId",
    //   render: (value, record, index) => {
    //     const {
    //       page: { pageNum, pageSize },
    //     } = this.state;
    //     return (pageNum - 1) * pageSize + index + 1;
    //   },
    // },
    { title: "任务名称", dataIndex: "taskName" },
    // {
    //   title: "自定义标题",
    //   width: 100,
    //   ellipsis: true,
    //   dataIndex: "customTitle",
    // },
    { title: "流程名称", dataIndex: "modelName" },
    { title: "流程单号", dataIndex: "serialNum" },
    {
      title: "状态",
      dataIndex: "status",
      render: value => (value === "TODO" ? "待处理" : "已完成"),
    },
    { title: "申请时间", dataIndex: "createTime" },
    { title: "申请人", dataIndex: "applyUserName" },
    // {
    //   title: "业务审批页",
    //   width: 100,
    //   align: "center",
    //   dataIndex: "busiApprovalPage",
    //   render: value => (
    //     <a
    //       onClick={() =>
    //         window.open(`http://${location.host}${value || ""}`, "_blank")
    //       }
    //     >
    //       打开
    //     </a>
    //   ),
    // },
    // {
    //   title: "操作",
    //   dataIndex: "claim",
    //   render: (value, record) => {
    //     // const { taskId, formKey, processDefinitionId, canRollback } = record; // 是否当前任务处理 1:是，0:否
    //     // const rollback = this.getOprateDisable("rollback");
    //     // const taskhandle = this.getOprateDisable("taskhandle");
    //     // const taskclaim = this.getOprateDisable("claim");
    //     return (
    //       <>
    //         <Link
    //           to={{
    //             // pathname: "/todo/detail",
    //             pathname: "/todo/templatepage",
    //             search: queryString.stringify({
    //               processInstanceId: record.processInstanceId,
    //               actype: "todo",
    //               taskId: record.taskId,
    //             }),
    //           }}
    //         >
    //           详情
    //         </Link>
    //         {/* {(value === true && taskhandle && (
    //           <>
    //             <Divider type="vertical" />
    //             <Link
    //               to={{
    //                 pathname: "/todo/deal",
    //                 search: queryString.stringify({
    //                   taskId,
    //                   processDefinitionId,
    //                   formKey,
    //                 }),
    //               }}
    //             >
    //               处理
    //             </Link>
    //           </>
    //         )) ||
    //           null} */}
    //         {/* { value === true && rollback && canRollback && (
    //             <>
    //               <Divider type="vertical" />
    //               <a
    //                 onClick={(e) => {
    //                   e.preventDefault();
    //                   this.handleRollbackVisible(true, record);
    //                 }}
    //               >
    //                 退回
    //               </a>
    //             </>
    //             ) || null
    //           } */}
    //         {/* {(value === false && taskclaim) && (
    //             <>
    //               <Divider type="vertical" />
    //               <Popconfirm
    //                 placement="left"
    //                 title={`确定签收：${record.modelName}?`} // `
    //                 onConfirm={() => { this.handleTaskclaim(record) }}
    //                 okText="确定"
    //                 cancelText="取消"
    //               >
    //                 <a onClick={(e) => { e.preventDefault(); }}>签收</a>
    //               </Popconfirm>
    //             </>
    //             ) || null
    //            } */}
    //       </>
    //     );
    //   },
    // },
  ];

  getAntTableProps = (props) => {
    const {
      page: { pageNum, pageSize },
    } = this.state;
    const { flowHandleStore, loading } = this.props;
    const { processData = [], totalCount } = flowHandleStore;
    return getTableProps({
      rowKey: "taskId",
      columns: this.getTableColumns(),
      dataSource: processData,
      loading:
        loading.effects["FlowHandle/getProTodo"] ||
        loading.effects["FlowHandle/handleTaskclaim"],
      pagination: {
        current: pageNum,
        pageSize,
        total: totalCount,
        onChange: this.handlePageChange,
        onShowSizeChange: this.handlePageChange,
      },
      ...props,
    });
  };

  // 获取查询参数
  getQueryParam = () => {
    const {
      page: { pageNum, pageSize },
    } = this.state;
    return { ...this.searchParams, pageNum, pageSize };
  };

  // 触发查询
  initData = () => {
    const { dispatch } = this.props;
    const params = this.getQueryParam();
    const type = "FlowHandle/getProTodo";
    dispatch({ type, payload: params });
  };

  // 页码页数改变
  handlePageChange = (pageNum, pageSize) => {
    this.setState({ page: { pageNum, pageSize } }, () => {
      this.initData();
    });
  };

  // 搜索
  handleSearch = (values, reset) => {
    if (reset) {
      this.resetPageData();
      return;
    }
    const { page } = this.state;
    this.searchParams = values;
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  };
}
